<template>
  <div :id="EDID">

  </div>
</template>
<script>
import E from "wangeditor";
import { client } from "@/api/qiniu";
export default {
  props: ["html"],
  data() {
    return {
      EDID: "edit" + +new Date(),
      value: ""
    };
  },
  methods: {
    setHtml(val) {
      this.value = val;
      this.editor.txt.html(val);
    }
  },
  mounted() {
    var that = this;
    const editor = new E("#" + this.EDID);
    this.editor = editor;
    const qiniu = client();
    qiniu.init();
    editor.config.customUploadImg = function(resultFiles, insertImgFn) {
      // resultFiles 是 input 中选中的文件列表
      // insertImgFn 是获取图片 url 后，插入到编辑器的方法
      qiniu
        .upload(resultFiles[0])
        .then(function(res) {
          // 上传图片，返回结果，将图片插入到编辑器中
          insertImgFn(res);
        })
        .catch(function(err) {
          console.log(err);
        });
    };

    // 配置 onchange 回调函数
    editor.config.onchange = function(newHtml) {
      that.value = newHtml;
      console.log("change 之后最新的 html", newHtml);
    };
    // 配置触发 onchange 的时间频率，默认为 200ms
    editor.config.onchangeTimeout = 500; // 修改为 500ms
    editor.config.zIndex = 100;

    editor.create();
    let html = this.html;
    if (html) editor.txt.html(this.html); // 重新设置编辑器内容
  }
};
</script>
